/**
 * Created by Administrator on 2017/7/25.
 */


import React from 'react'
import {View,StyleSheet,Image,Text,TouchableOpacity} from 'react-native'
import Swiper from 'react-native-swiper'
import RequestUtils from '../Common/NetUtils'
const styles = StyleSheet.create({
    container:{
        flex:1,backgroundColor:'#fff'
    },
    banner:{
        width:'100%',
        height:342,},
    bannerImg:{ width:'100%',height:342},
    divider:{width:'100%',height:0.7,backgroundColor:'#cfcfcf'},
    title:{fontSize:18,marginLeft:16,marginTop:16,color:'#222'}
})

export default class GoodsDetails extends React.Component{

    static navigationOptions = ({navigation}) =>(
        {
            headerStyle: {
                height: 50,
                backgroundColor: '#40CCCB',
                elevation: 0,
            },
            title: '商品详情',
            headerTitleStyle: {
                color: '#FFFFFF',
                alignSelf: 'center',
            },
            headerLeft: <TouchableOpacity style={{marginLeft: 10}} onPress={() => navigation.goBack()}>
                <Image resizeMode='contain' source={require('../Img/icon_back.png')} style={{width:20,height:20}}/>
            </TouchableOpacity>,
        }
    )

    constructor(props){
        super(props)
        this.state = {
            bannerData:[],
            detailsData:null
        }
    }

    render(){

        if(this.state.detailsData!=null){
            let banner = this._renderSwiper();
            return(
                <View style={styles.container}>
                    {banner}
                    <View style={styles.divider}/>
                    <Text style={styles.title}>{this.state.detailsData.shopName}</Text>
                    <View style={{flexDirection:'row',height:22,alignItems:'center',justifyContent:'space-between',marginTop:18}}>
                        <View style={{flexDirection:'row',marginLeft:16,alignItems:'center'}}>
                            <View style={{width:50,height:22, backgroundColor:'#40CCCB'
                                ,borderRadius:12,justifyContent:'center',alignItems:'center'}}>
                                <Text style={{ color:'#fff'}}>可租用</Text>
                            </View>
                            <Text style={{marginLeft:16,color:'#999999',fontSize:13}}>50积分/天 押金：¥30</Text>
                        </View>
                        <Text style={{marginRight:16}}>￥${this.state.detailsData.money}</Text>
                    </View>
                    <View style={{flexDirection:'row',height:22,alignItems:'center',marginTop:18}}>
                        <View style={{marginLeft:16,borderRadius:12,width:50,height:22,backgroundColor:'#fff',borderWidth:1,borderColor:'#EE2F36',alignItems:'center',justifyContent:'center'}}>
                            <Text style={{color:'#EE2F36',fontSize:12}}>积分</Text>
                        </View>
                        <Text style={{fontSize:13,color:'#EE2F36',marginLeft:16}}>购买可得32积分</Text>
                    </View>

                    <View style={[styles.divider,{marginTop:20}]}/>
                    <View style={{height:50,width:'100%',flexDirection:'row',alignItems:'center',justifyContent:'space-between'}}>
                        <View style={{flexDirection:'row',height:50,alignItems:'center'}}>
                            <Image style={{width:13,height:18,marginLeft:16}} source={require('../Img/icon_location.png')}/>
                            <Text style={{marginLeft:10,color:'#222',fontSize:16}}>查看物品定位</Text>
                        </View>
                    </View>
                    <View style={[styles.divider,{marginTop:2}]}/>
                    <View style={{flex: 1,alignItems:'center',justifyContent:'center',marginTop:1}}>
                        <View style={{width:200,height:45,alignItems:'center',justifyContent:'center', backgroundColor:'#40CCCB',borderRadius:21}}>
                            <Text style={{fontSize:16,color:'#fff'}}>立即扫码</Text>
                        </View>
                    </View>
                </View>
            )
        }else {
            return(
                <View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
                    <Text>数据加载中...</Text>
                </View>
            )
        }

    }

    _renderSwiper(){
        let dataArr = [];
        for(let i = 0;i<this.state.bannerData.length;i++){
            dataArr.push(<Image style={styles.banner} source={{uri:this.state.bannerData[i].shopUrl}}/>)
        }
        return(
            <Swiper
                index={0}
                autoplay={true}
                loop={true}
                height={342}
                autoplayTimeout={3}
                showsButtons={false}>
                {dataArr}
            </Swiper>
        )
    }

    _fetchDetails(){
        let urlParams = {'shop_id':this.props.navigation.state.params.details.id};
        RequestUtils.getData('http://sharebox.wenweikeji.com/api/home/getShopDetails',urlParams,(result)=>{
            this.setState({bannerData:result.data.shopImages,detailsData:result.data})
        })
    }

    componentDidMount() {
        this._fetchDetails();
    }

}

